<template>
  <a-modal v-model:visible="showModal" title="租车转违章" width="40vw" unmount-on-close>
    <a-space :size="22" direction="vertical">
      <page-form ref="formRef" :model="formInfo" :rules="rules" layout="vertical" class="rule-container">
        <page-form-row gutter="24">
          <page-form-item size="1" field="thawAmount" class="w-full">
            <section>
              租车转违章时&nbsp;&nbsp;
              <i-input-number
                v-model="formInfo.thawAmount"
                :min="0"
                :max="thawAmountMax"
                :precision="2"
                :style="{ width: '150px' }"
                unit="元"
              />&nbsp;&nbsp;将解冻，
            </section>
          </page-form-item>
          <page-form-item size="1">
            剩余&nbsp;&nbsp;
            <i-input-number
              v-model="freeNum"
              :min="0"
              :allow-clear="false"
              :precision="2"
              disabled
              :style="{ width: '150px' }"
              unit="元"
            />&nbsp;&nbsp;将继续冻结，冻结时长<span class="blue">{{ formInfo.freezeDay }}</span
            >天;
          </page-form-item>
          <page-form-item size="1">
            预计解冻日期在<span class="blue" style="margin-left: 4px">{{ formInfo.carChangeViPlanThawTime }}</span>
          </page-form-item>
        </page-form-row>
        <page-form-row gutter="24">
          <page-form-item class="w-full body" label="备注" size="1">
            <a-textarea :max-length="200" placeholder="请输入" v-model="formInfo.remark" auto-size />
          </page-form-item>
        </page-form-row>
      </page-form>
    </a-space>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="handleConfirm">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { zmChangeDeposit } from '@/api/order/sOrder'
  import { decimalSubtract } from '@/utils/index'
  import { Message } from '@arco-design/web-vue'

  const formRef = ref()
  const formInfo = ref({})
  const emit = defineEmits(['ok'])

  const rules = {
    thawAmount: [{ required: true, message: '请输入金额' }],
  }
  // 继续冻结金额，可用金额减去解冻金额
  const freeNum = computed(() => {
    return decimalSubtract(formInfo.value.availableDepositAmount, formInfo.value.thawAmount)
  })
  // 弹窗状态
  const showModal = ref(false)
  const show = (record) => {
    showModal.value = true
    formInfo.value = { ...record }
    // 可用金额大于违章押金应收金额
    if (record.availableDepositAmount > record.illegalDepositAmount) {
      formInfo.value.thawAmount = decimalSubtract(record.availableDepositAmount, record.illegalDepositAmount)
    } else {
      formInfo.value.thawAmount = 0
    }
  }
  // 解冻金额最大值
  // 当前可用金额 - 0.01
  const thawAmountMax = computed(() => {
    return decimalSubtract(formInfo.value.availableDepositAmount, 0.01)
  })
  const handleConfirm = () => {
    formRef.value.validate((error) => {
      if (!error) {
        zmChangeDeposit({
          id: formInfo.value.carDepositId,
          thawAmount: formInfo.value.thawAmount,
          remark: formInfo.value.remark,
        }).then((res) => {
          if (res.code == 200) {
            emit('ok')
            Message.success('操作成功')
            onClose()
          }
        })
      }
    })
  }
  const onClose = () => {
    showModal.value = false
  }

  defineExpose({ show })
</script>

<style lang="less" scoped>
  :deep(.arco-form-item-message) {
    margin-left: 100px;
  }
  .rule-container {
    section {
      width: 100%;
    }
    .flex {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .blue {
      color: #1890ff;
    }
  }
</style>
